<template>
	<view>
		<u-radio-group v-model="radioValue" @change="radioGroupChange">
			<u-radio 
				@change="radioChange(item)" 
				v-for="(item, index) in radioList" :key="index" 
				:name="item.text"
				:active-color="themeColor"
				:shape="shape"
				:icon-size="iconSize"
				:label-size="labelSize"
				
			>
				{{item.text}}
			</u-radio>
		</u-radio-group>
	</view>
</template>

<script>
	import themes from "@/utils/theme.js";
	export default {
		name:"l-radio",
		props: {
			List:{
				type:Array,
				default:[]
			},
			IconSize:{
				type:Number,
				default:20
			},
			LabelSize:{
				type:Number,
				default:28
			},
			Shape:{
				type:String,
				default:'square'
			},
			RadioValue:String
		},
		data() {
			return {
				themeColor: themes.themeColor,
				radioList: [],
				radioValue: '',
				checkType:1,
				iconSize:0,
				labelSize:0,
				shape:'square'
			};
		},
		methods:{
			
			// 选中某个选项时，由radio触发
			radioChange(e) {
				// console.log(e);
				this.$emit("chooseFn",e)
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			
		},
		watch:{
			IconSize(v){
			  this.iconSize = v
			},
			LabelSize(v){
			  this.labelSize = v
			},
			RadioValue(v){
				this.radioValue = v
			}
		},
		mounted() {
			this.iconSize = this.IconSize
			this.labelSize = this.LabelSize
			this.shape = this.Shape
			this.radioList = this.List
			this.radioValue = this.RadioValue
		}
	}
</script>

<style lang="scss">

</style>